<template>
    <div class="mainContent">
        <div class="detailMain">
            <div class="funBox commonStyle">
                <div class="leftImg">
                    <div class="imgBox">
                        <viewer>
                            <img :src="detailForm.picture" alt="" style="width:100%;height:100%;">
                        </viewer>
                    </div>
                </div>
                <div class="rightContent">
                    <div class="title">
                        <span>机构功能</span>
                    </div>
                    <div class="contentList">
                        <ul>
                            <li><i></i><span class="labelText">机构名称:</span><span>{{detailForm.name}}</span></li>
                            <li><i></i><span class="labelText">运动变换:</span><span>从单向连续转动到往复直线运动</span></li>
                        </ul>
                    </div>
                    <div class="contentTable">
                        <div class="aliginItem">
                            <i></i><span class="labelText">机构结构:</span>
                        </div>
                        <el-table
                            :data="detailFormList"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="gjs"
                            align="center"
                            label="构件数"
                            min-width="10%">
                            </el-table-column>
                            <el-table-column
                            prop="jhgx"
                            align="center"
                            label="运动空间"
                            min-width="10%">
                            </el-table-column>
                            <el-table-column
                            prop="ydlxs"
                            align="center"
                            label="运动链形式"
                            min-width="10%">
                            </el-table-column>
                            <el-table-column
                            prop="rack"
                            align="center"
                            label="机架"
                            min-width="10%">
                            </el-table-column>
                            <el-table-column
                            prop="actuator"
                            align="center"
                            label="驱动件"
                            min-width="10%">
                            </el-table-column>
                            <el-table-column
                            prop="follower"
                            align="center"
                            label="从动件"
                            min-width="10%">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            align="center"
                            label="运动副类型|布置"
                            min-width="20%">
                            <template slot-scope="scope">
                                <span>{{scope.row.type + ' | ' + scope.row.decorate}}</span>
                            </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="specialBox commonStyle">
                <div class="leftImg">
                    <div class="imgBox">
                        <viewer>
                            <img :src="detailForm.remarks" alt="" style="width:100%;height:100%;">
                        </viewer>
                    </div>
                    
                </div>
                <div class="rightContent">
                    <div class="title">
                        <span>机构特性</span>
                    </div>
                    <div class="contentTable">
                        <div class="aliginItem">
                            <i></i><span class="labelText">几何特性:</span>
                        </div>
                        <el-table
                            :data="detailFormList"
                            border
                            style="width: 33%">
                            <el-table-column
                            prop="zczxdwz"
                            align="center"
                            label="主从轴相对位置">
                            </el-table-column>
                            <el-table-column
                            prop="xdcc"
                            align="center"
                            label="相对尺寸">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="contentTable">
                        <div class="aliginItem">
                            <i></i><span class="labelText">传动特性:</span>
                        </div>
                        
                        <el-table
                            :data="detailTurnList"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="valueType"
                            label=""
                            align="center"
                            width="80">
                            </el-table-column>
                            <el-table-column
                            prop="cdhsdfdcx"
                            align="center"
                            label="传动函数的非对称性"
                            min-width="20%">
                            </el-table-column>
                            <el-table-column
                            prop="cdhsdxxbf"
                            align="center"
                            label="传动函数的线性部分"
                            min-width="20%">
                            </el-table-column>
                            <el-table-column
                            prop="jsdtx"
                            align="center"
                            label="加速度特性"
                            min-width="10%">
                            </el-table-column>
                            <el-table-column
                            prop="xckdx"
                            align="center"
                            label="行程可调性"
                            min-width="10%">
                            </el-table-column>
                            <el-table-column
                            prop="mscxdzs"
                            align="center"
                            label="每双行程的转数"
                            min-width="20%">
                            </el-table-column>
                            <el-table-column
                            prop="zcdxknx"
                            align="center"
                            label="主从动件可逆性"
                            min-width="20%">
                            </el-table-column>
                            <el-table-column
                            prop="zcdxknx"
                            align="center"
                            label="主从动件可逆性"
                            min-width="20%">
                            </el-table-column>
                            
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer" style="width:92%;margin:auto;text-align:right;padding:0;">
            <el-select class="" v-model="exportType" style='width:120px'>
                <el-option
                v-for="item in exportData"
                :key="item.value"
                :label="item.name"
                :value="item.value">
                </el-option>
            </el-select>
            <el-button class="elBtn" type="primary" @click.native="exportFun">导 出</el-button>
            <el-button class="elBtn" type="primary" @click.native="goBack">返 回</el-button>
        </div>
    </div>
</template>

<script>
import commonFun from './commonFun.js'
export default {
    data () {
        return {
            fanganId: '',
            detailFormList: [],
            detailTurnList: [],
            detailForm:{
                id:"",
                name:"",
                type:"",
                picture:"",
                cdhs:"",
                gjs:"",
                jhgx:"",
                ydlxs:"",
                rack:"",
                actuator:"",
                follower:"",
                decorate:"",
                zczxdwz:"",
                xdcc:"",
                cdhsdfdcx:"",
                cdhsdxxbf:"",
                jsdtx:"",
                xckdx:"",
                mscxdzs:"",
                zcdxknx:"",
                remarks:""
            },
            exportType:3,
            exportData:[
                {name:'word文件',value:1},
                {name:'excel文件',value:2},
                {name:'pdf文件',value:3}
            ],
            params:'',
            gradeList:"",
            specialForm:""
        }
    },
    created () {
        this.params = this.$route.params.selectParams
        this.gradeList = this.$route.params.grageList
        this.specialForm = this.$route.params.specialList
        this.fanganId = this.$route.params.id
        this.selectById(this.fanganId)
    },
    methods : {
        // 根据id查询
        selectById(id){
            this.detailFormList = []
            this.detailTurnList = []
            const params = {
                cdhsdfdcx:this.cdhsdfdcx?this.cdhsdfdcx:'空',
                cdhsdxxbf:this.cdhsdxxbf?this.cdhsdxxbf:'空',
                jsdtx:this.jsdtx?this.jsdtx:'空',
                xckdx:this.xckdx?this.xckdx:'空',
                mscxdzs:this.mscxdzs?this.mscxdzs:'空',
                zcdxknx:this.zcdxknx?this.zcdxknx:'空',
                valueType:"给定值"
            }
            this.detailTurnList.push(params)
            commonFun.selectById(id,result => {
                this.detailForm = result.data.data
                result.data.data.valueType = "实际值"
                this.detailFormList.push(result.data.data)
                this.detailTurnList.unshift(result.data.data)
                this.dialogFormVisible = true
                this.dialogImageUrl = result.data.data.picture
            })
        },
        exportFun(){
            if (!this.exportType) {
                this.$message({center: true,message: "请选择导出类型",type: 'warning'});
            }
            this.$api.exportFangan(this.exportType,this.fanganId)
            .then(res=>{
                if(res.status != 200) return this.$message({center: true,message: "导出失败",type: 'warning'});
                let blob = ""
                if(this.exportType === 1){
                    blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
                }else if(this.exportType === 2){
                    blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'})
                }else if(this.exportType === 3){
                    blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'})
                }
                let url = window.URL.createObjectURL(blob);
                let aLink = document.createElement("a");
                aLink.style.display = "none";
                aLink.href = url;
                if(this.exportType === 1){
                    aLink.setAttribute("download", `${this.detailForm.name}.doc`);
                }else if(this.exportType === 2){
                    aLink.setAttribute("download", `${this.detailForm.name}.xls`);
                }else if(this.exportType === 3){
                    aLink.setAttribute("download", `${this.detailForm.name}.pdf`);
                }
                
                document.body.appendChild(aLink);
                aLink.click();
                document.body.removeChild(aLink); 
                window.URL.revokeObjectURL(url); 
            })
        },
        goBack () {
            this.$router.push({
                path: '/programAdd',
                name:`programAdd`,
                params: {
                    selectParmas: this.params,
                    grageList: this.gradeList,
                    specialList:this.specialForm
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
i{
    display: inline-block;
    width:20px;
    height: 20px;
    margin-right:5px;
    background: url('../../../../images/icon4.png') center/cover no-repeat;
}
.aliginItem{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.mainContent{
    width: 100%;
    height: 100%;
    margin:auto;
    background: #fff;
    overflow-y: auto;
}
.detailMain{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 92%;
    height: 92%;
    margin:auto;
    .commonStyle{
        display: flex;
        width:100%;
    }
    .leftImg{
        flex: 4;
        .imgBox{
            max-width: 300px;
            min-width: 100px;
            max-height: 300px;
            min-width: 100px;
            >div{
                width: 100%;
                height: 100%;
            }
            img{
                width: 100%;
                height: 100%;
                cursor: pointer;
            }
        }
    }
    .rightContent{
        flex: 10;
        margin-left: 1%;
        text-align: left;
        .title{
            font-size: 20px;
            font-weight: bold;
            color: #7A3C40;
        }
        ul{padding: 0;margin: 0;}
        li{
            // line-height: 25px;
            display: flex;
            align-items: center;
        }
        span{
            line-height: 35px;
        }
        .labelText{
            margin-right: 8px;
            font-size: 14px;
            font-weight: bold; 
            color: #7A3C40;
        }
    }
    
    .funBox{
        height: 35%;
    }
    .specialBox{
        height: 55%;
        margin-top: 15px;
    }
}
</style>